<template>
  <div>
    <div class="header">
				<!-- <div class="header-center">足球数据</div> -->
        <div class="header-cen">
          <div class="cen-cn1" :class="{active:selected=='社区'}" @click="choose('社区')">社区</div>
          <div class="cen-cn2" :class="{active:selected=='广场'}" @click="choose('广场')">广场</div>
        </div>
				<div class="header-right iconfont" @click="search()">&#xe615;</div>
			</div>
    <div class="container">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id='社区'>
            <navbar title="我的圈子" path="/user/myCircle"></navbar>
            <slide :slideList="slideList"></slide>
            <div class="line-h"></div>
            <navbar title="热门联赛"></navbar>
            <grid :gridList='gridList'></grid>
            <div class="line-h"></div>
            <div class="banner">
              <img src="/static/imgs/banner.png"/>
            </div>
            <navbar title="热门联赛"></navbar>
            <grid :gridList='gridList'></grid>
            <navbar title="分类话题"></navbar>
            <grid :gridList='sortList'></grid>
          </mt-tab-container-item>
          <mt-tab-container-item id='广场'>
            <mt-navbar v-model="selected2">
              <mt-tab-item id="1" ><div class="selected-tit" :class="{select:selected2=='1'}">图文</div></mt-tab-item>
              <mt-tab-item id="2" ><div class="selected-tit" :class="{select:selected2=='2'}">视屏</div></mt-tab-item>
              <mt-tab-item id="3" ><div class="selected-tit" :class="{select:selected2=='3'}">文字</div></mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected2">
              <mt-tab-container-item id="1">
                <post :postList="postList"></post>
              </mt-tab-container-item>
              <mt-tab-container-item id="2">
                <div>2</div>
              </mt-tab-container-item>
              <mt-tab-container-item id="3">
                <div>3</div>
              </mt-tab-container-item>
            </mt-tab-container>
          </mt-tab-container-item>
        </mt-tab-container> 
    </div>
     <home-footer :hover="currentItem"></home-footer>
  </div>
</template>
<script>
import {TabContainer, TabContainerItem,Navbar, TabItem } from "mint-ui";
import navbar from './components/navbar';
import slide from './components/slide'
import grid from './components/grid'
import HomeFooter from '../../components/Footer'
import post from '../../components/post'
export default {
  name: "community",
  components: {
    mtTabContainer:TabContainer,
    mtTabContainerItem:TabContainerItem,
    navbar,
    slide,
    grid,
    HomeFooter,
    mtNavbar:Navbar,
    mtTabItem:TabItem,
    post,
  },
  data: function() {
    return {
      currentItem:'2',
      selected:'社区',
      selected2:'1',
      slideList:[{title:'发现圈子',imgUrl:'/static/imgs/faxian.png'},{title:'国际米兰',imgUrl:'/static/imgs/guojimilan.png'},
        {title:'利物浦',imgUrl:'/static/imgs/liwupu.png'},{title:'中超',imgUrl:'/static/imgs/zhongchao2.png'},
        {title:'曼联',imgUrl:"/static/imgs/manlian.png"}
      ],
      gridList:[
        {title:'中超',imgUrl:'/static/imgs/zhongchao.png'},{title:'英超',imgUrl:'/static/imgs/yinchao.png'},
        {title:'德甲',imgUrl:'/static/imgs/dejia.png'},{title:'意甲',imgUrl:'/static/imgs/yijia.png'},{title:'法甲',imgUrl:'/static/imgs/fajia.png'},
        {title:'西甲',imgUrl:'/static/imgs/xijia.png'},{title:'冠军杯',imgUrl:'/static/imgs/guanjunbei.png'},
        {title:'日职',imgUrl:'/static/imgs/rizhi.png'},{title:"亚洲杯",imgUrl:'/static/imgs/yazhoubei.png'},
        {title:'更多',imgUrl:'/static/imgs/genduo.png'}
      ],
      sortList:[
        {title:'感情',imgUrl:'/static/imgs/ganqing.png'},{title:'搞笑',imgUrl:'/static/imgs/gaoxiao.png'},
        {title:'伤感',imgUrl:'/static/imgs/shanggan.png'},{title:'今天有什么事',imgUrl:'/static/imgs/jintian.png'},{title:'开心',imgUrl:'/static/imgs/kaixin.png'},
        {title:'影视',imgUrl:'/static/imgs/yingshi.png'},{title:'二次元',imgUrl:'/static/imgs/erciyuan.png'},
        {title:'算命',imgUrl:'/static/imgs/suanming.png'},{title:'约个球',imgUrl:'/static/imgs/yuegeqiu.png'},
        {title:'更多',imgUrl:'/static/imgs/genduo.png'}
      ],
      postList:[
        {userName:'刘希依9527',date:'十分钟前',imgUrl:'/static/img/header.png',
        content:'今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定',
        
        },
        {userName:'刘希依9527',date:'十分钟前',imgUrl:'/static/img/header.png',
        content:'今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定',
        videoUrl:'dff',zanNum:177,plNum:103,fxNum:17,title:'国际米兰'
        },
        {userName:'刘希依9527',date:'十分钟前',imgUrl:'/static/img/header.png',
        content:'今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定',
        videoUrl:'dd',zanNum:177,plNum:103,fxNum:17
        }
      ]
    };
  },
  methods: {
    choose(e){
      this.selected=e;
    },
    search(){
      console.log(1)
    }
  }
};
</script>
<style lang="less" scoped>
@import '~styles/header.less';
img{
  width: 100%;
  height: 100%;
}
.line-h{
    width: 100%;
    height: .11rem;
    background: #F5F8FB;
}
.header-cen{
  width: 2.6rem;
  margin-left: 50%;
  height: 1rem;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cen-cn1,.cen-cn2{
    color: #fff;
    font-size: .36rem;
  }
  .active{
    font-size: .4rem;
    font-weight: 600;
  }
}
.container{
  margin-bottom: 1.33rem;
  margin-top: 1rem;
  width: 100%;
  .banner{
    padding: .18rem .18rem .06rem .23rem;
    border-radius: .12rem;
    overflow: hidden;
  }
}
.mint-navbar {
      background: #E0E0E0;
      // 切换 顶部 tab
      .is-selected {
        border-bottom: 3px solid #70C434;
        color: #4F4F4F;
        margin-bottom: -3px;
        .select {
          font-size: .3rem;
          font-weight: 600;
          letter-spacing: 2px;
        }
      }
      .selected-tit {
         color: #4F4F4F;
         font-size: .28rem;
        
      }
      .mint-tab-item{
        padding: 7px 0
      }
  }
</style>